import { Spin } from '@arco-design/web-react';
import React, { lazy, Suspense, useEffect } from 'react';
import styled from 'styled-components';

import { Routes, Route, useNavigate } from 'react-router-dom'
 
const RealTimeMoniter = lazy(()=>import('@/page/RealTimeMoniter/RealTimeMoniter'));
const DeviceManage = lazy(()=>import('@/page/DeviceManage/DeviceManage'));
const OrderManage = lazy(()=>import('@/page/OrderManage/OrderManage'));
const UserManage = lazy(()=>import('@/page/UserManage/UserManage'));
const DataCather = lazy(()=>import('@/page/DataCather/DataCather'));
const DataAnalyse = lazy(()=>import('@/page/DataAnalyse/DataAnalyse'));


const Redirect = ({ to }) => {

    const navigate = useNavigate();

    useEffect(() => {

      navigate(to);
      
    });

    return null;
}

export interface IRouterConfig {
    currentMenu: string;
    config?: Record<string, any>;
}

const RouterConfig = (props: IRouterConfig) => {

    const { currentMenu } = props;
    const navigate = useNavigate();

    useEffect(() => {
        navigate(currentMenu);
    }, [ currentMenu, navigate ])

    return (
        <>
            <Suspense fallback={
                <div style={{
                    position: 'relative',
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                    width: '100%',
                    height: '100%',
                    background: 'rgb(54,54,54)',
                }}> 
                    <Spin dot ></Spin>
                </div>
            }>
                <Routes>
                    <Route path="/" element={<Redirect to={"/realTimeMoniter"}/>} />
                    <Route path="/realTimeMoniter" element={<RealTimeMoniter />} />
                    <Route path="/userManage" element={<UserManage />} />
                    <Route path="/deviceManage" element={<DeviceManage />} />
                    <Route path="/orderManage" element={<OrderManage />} />
                    <Route path="/dataAnalyse" element={<DataAnalyse />} />
                    <Route path="/dataCather" element={<DataCather />} />
                </Routes>
            </Suspense>
        </>
    )
}


export default RouterConfig;